<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		        
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/glyphicons.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript" src="js/popper.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script> 
		<style type="text/css">
			table{
				border-collapse: collapse;
				width: 300px;
				height: 200px;
			}
			
			table,td,tr{
				border: 1px solid rgb(93, 98, 170);
				text-align: center;
			}
			
			button{
				border: 0px;
				font-size: 20px;
				background-color: rgb(143, 167, 187);
				width: 100%;
				height: 100%;
			}
			
			.plusone{
				color: rgb(119, 46, 19);
				background-color: rgb(145, 189, 168);
			}	
		</style>
		
		<script type="text/javascript">
			$(function(){
				var str="";
				$("button").click(function(){
					var btn = event.target;
					var num = $(btn).text();
					str +=num
					$("#val").val(str)
				})
				
				$("#cacu").click(function(){
					var str1 = str.replace("=","");
					var str2 =  caculate(str1)
					$("#val").val(str+str2);
				})
				
				function caculate(str){
					var index = str.indexOf("+");
					if(index != -1){
						return caculate(str.substring(0,index))+caculate(str.substring(index+1));
					}
					var index = str.indexOf("-");
					if(index != -1){
						return caculate(str.substring(0,index))-caculate(str.substring(index+1));
					}
					
					var index = str.indexOf("*");
					if(index != -1){
						return caculate(str.substring(0,index))*caculate(str.substring(index+1));
					}
					
					var index = str.indexOf("/");
					if(index != -1){
						return caculate(str.substring(0,index))/caculate(str.substring(index+1));
					}
					return parseFloat(str)
					
				}
				
			})
		</script>
		
	</head>
	<body>
		<div class="container" style="margin: 0px auto;border: 1px;" id="container">
			<div align="center" >
						<form action="countercheck.jsp" method="post" >
							<input type="text" name="num" value="" style="width: 300px;height: 60px;" id="val"/>
						<table>
							<tr>
								<td><button type="button"  class="plusone">+</button> </td>
								<td><button type="button"  class="plusone">/</button> </td>
								<td><button type="button"  class="plusone">*</button></td>
								<td><button type="button"  class="plusone">-</button></td>
							</tr>
							<tr>
								<td><button type="button">7</button></td>
								<td><button type="button">8</button></td>
								<td><button type="button">9</button></td>
								<td ><button type="button"   class="plusone">(</button> </td>
							</tr>
							<tr>
								<td><button type="button"  >4</button></td>
								<td><button type="button"  >5</button></td>
								<td><button type="button"  >6</button></td>
								<td><button type="button"   class="plusone">)</button></td>
							</tr>
							<tr>
								<td><button type="button"  >1</button></td>
								<td><button type="button"  >2</button></td>
								<td><button type="button"  >3</button></td>
								<td><button type="button"  class="plusone">.</button></td>
							</tr>
							<tr>
								<td colspan="2"><button type="button"   >0</button></td>
								<td colspan="2"><button type="submit"  class="plusone" id="cacu">=</button></td>
								
							</tr>
						</table>
						
					</form>
			</div>
		</div>
	</body>
</html>

